<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostRolePayloadType } from '@/api/role/types'
import type { FormRules, FormInstance } from 'element-plus'

import { reactive, ref } from 'vue'

// 表单数据（切记切记切记 全部用我给的单词）
const formData = reactive<PostRolePayloadType>({
	role_name: '',
	role_desc: ''
})
const formRules = reactive<FormRules>({
	role_name: [
		{ required: true, message: '角色名必须', trigger: 'blur' },
		{ min: 2, max: 8, message: '角色名至少2~8个字符', trigger: 'blur' }
	],
	role_desc: [
		{ required: true, message: '角色描述必须', trigger: 'blur' },
		{ min: 2, max: 18, message: '角色名至少2~18个字符', trigger: 'blur' }
	]
})

// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	formRef.value?.validate((isSuccess) => {
		if (isSuccess) {
			console.log('立即创建：', formData)
		}
	})
}
const handleReset = () => {
	formRef.value!.resetFields()
}

// 对话框状态
const status = ref(false)
defineExpose({
	status,
	formData
})
</script>

<template>
	<el-dialog v-model="status" title="角色编辑" width="30%" :before-close="() => (status = false)">
		<!-- 内容 -->
		<el-form v-if="status" label-width="80" size="large" :model="formData" :rules="formRules" ref="formRef">
			<el-form-item label="角色名" prop="role_name">
				<el-input placeholder="请输入角色名" v-model="formData.role_name" />
			</el-form-item>
			<el-form-item label="角色描述" prop="role_desc">
				<el-input placeholder="请输入角色描述" v-model="formData.role_desc" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit">立即更新</el-button>
				<el-button type="default" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 内容 -->
	</el-dialog>
</template>

<style lang="scss" scoped>
.el-form {
	max-width: 600px;
}
</style>
